<template>
	<view class="container">
		<swiper class="vipcard-swiper" :circular="true" previous-margin="50rpx" next-margin="50rpx">
			<swiper-item v-for="(item,index) in vipCardData" :key="index">
				<view class="vipcard-wrapper">
					<view class="vipcard-wrapper__head" :style="{'background': item.background}">
						<image class="icon" src="../../../static/icons/icon_vipcard-icon.png" mode="aspectFit"></image>
						<image class="backdrop" src="../../../static/icons/icon_vipcard-backdrop.png" mode="aspectFit"></image>
						<view class="title">{{ item.vip.name }}</view>
						<view class="time">{{ item.expire_in_text }}</view>
						<view class="number" v-if="item.type==2">剩余次数: <text>{{ item.value }}</text></view>
					</view>
					<view class="vipcard-wrapper__body">
						<view class="title">会员权限</view>
						<rich-text :nodes="item.vip.content"></rich-text>
					</view>
				</view>
				<view class="vipcard-footer">
					<u-button @click="activation(index)" shape="circle" :ripple="true" :custom-style="{height:'90rpx',color:'#fff',background:'linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%)'}">{{ item.activition_status == '0' ? '立即开卡' : '续费会员卡' }}</u-button>
					<!-- <text v-if="item.activition_status==0">购卡后三个月内需开卡\n如未操作会在开卡期限最后一天自动开卡</text> -->
				</view>
			</swiper-item>
			<swiper-item v-if="vipCardMore.nothing">
				<view class="vipcard-footer">
					<div style="text-align: center;">{{vipCardMore.text}}，<text @click="bindBuy()" style="display:inline-block;color:#A36BFF;">立即购买</text></div>
					
				</view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vipCardData: [],
				vipCardMore: {nothing:false,text:'加载中...'}
			}
		},
		onLoad(){
			this.getList();
		},
		methods: {
			//获取会员卡
			getList(){
				this.$core.get({url: 'fitness.user/myvip',data: {},success: ret => {
						this.vipCardData = ret.data;
						if(ret.data.length>0){
							this.vipCardMore = {text: ''}
						}else{
							this.vipCardMore = {nothing:true,text: '暂无会员卡'}
						}
					},
					loading: false
				});
			},
			//立即购买
			bindBuy(){
				uni.navigateTo({
					url: '/pages/my/vipBuy/vipBuy'
				})
			},
			//激活
			activation(index){
				
				let that = this;
				let vipCardData = that.vipCardData;
				let id = vipCardData[index].id;
				if(vipCardData[index].activition_status == '0'){
					that.$core.post({url: 'fitness.vip/vip_activation',data: {user_vip_id:id},success: ret => {
							uni.showToast({
								title: "激活成功",
								icon:'none'
							})
							that.getList()
						}
					});
				}else{
					uni.navigateTo({
						url: '/pages/my/vipBuy/vipBuy'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F6F6F6;
	}
	.vipcard-swiper {
		width: 100%;
		height: 100vh;
		swiper-item {
			display: flex;
			flex-direction: column;
			height: 100%;
			padding: 32rpx 16rpx;
			box-sizing: border-box;
		}
	}
	.vipcard-wrapper {
		flex: 1;
		background: #FFFFFF;
		border-radius: 24rpx;
		overflow: hidden;
		&__head {
			position: relative;
			display: flex;
			flex-direction: column;
			padding: 35rpx 90rpx;
			height: 250rpx;
			background: linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%);
			overflow: hidden;
			> view {
				position: relative;
			}
			&::before {
				content: '';
				position: absolute;
				top: -98rpx;
				left: -98rpx;
				display: block;
				width: 268rpx;
				height: 268rpx;
				background: rgba(255,255,255,0.05);
				border-radius: 50%;
			}
			.backdrop {
				position: absolute;
				top: 18rpx;
				right: -40rpx;
				display: block;
				width: 303rpx;
				height: 266rpx;
			}
			.icon {
				position: absolute;
				top: 42rpx;
				left: 34rpx;
				display: block;
				width: 36rpx;
				height: 36rpx;
			}
			.title {
				line-height: 45rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
			.time {
				flex: 1;
				line-height: 28rpx;
				font-size: 20rpx;
				color: #FFFFFF;
			}
			.number {
				line-height: 22rpx;
				font-size: 16rpx;
				color: #FFFFFF;
				text {
					padding-right: 6rpx;
					line-height: 45rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
		&__body {
			flex: 1;
			padding: 40rpx 34rpx;
			.title {
				margin-bottom: 8rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}
			text {
				display: block;
				line-height: 60rpx;
				font-size: 26rpx;
				color: #333333;
			}
		}
	}
	.vipcard-footer {
		margin-top: 60rpx;
		min-height: 256rpx;
		padding: 36rpx 65rpx;
		text {
			display: block;
			margin-top: 28rpx;
			height: 66rpx;
			text-align: center;
			line-height: 33rpx;
			font-size: 24rpx;
			color: #999999;
		}
	}
</style>